@using System.ComponentModel
@using Microsoft.AspNetCore.Components
<DocMatTabGroup></DocMatTabGroup>
<DocMatTab Secondary="true"></DocMatTab>


<h5 class="mat-h5">Example</h5>

<DemoContainer>
    <Content>
        <MatTabGroup>
            <MatTab Label="First">
                First Content
            </MatTab>
            <MatTab Label="Second">
                Second Content
            </MatTab>
            <MatTab>
                <LabelContent>
                    Third <MatIcon Icon="@MatIconNames.Close"></MatIcon>
                </LabelContent>
                <ChildContent>
                    Third Content
                </ChildContent>
            </MatTab>

        </MatTabGroup>
    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <MatTabGroup>
            <MatTab Label=""First"">
                First Content
            </MatTab>
            <MatTab Label=""Second"">
                Second Content
            </MatTab>
            <MatTab>
                <LabelContent>
                    Third <MatIcon Icon=""@MatIconNames.Close""></MatIcon>
                </LabelContent>
                <ChildContent>
                    Third Content
                </ChildContent>
            </MatTab>

        </MatTabGroup>
    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>


<h5 class="mat-h5">Dynamic tabs and close button</h5>

<DemoContainer>
    <Content>
        <MatTabGroup>
            @foreach (var tab in tabs)
            {
                <MatTab>
                    <LabelContent>
                        @tab.Label <MatIconButton Icon="@MatIconNames.Close" OnClick="@(_ => CloseTab(tab))"></MatIconButton>
                    </LabelContent>
                    <ChildContent>
                        @tab.Content
                    </ChildContent>
                </MatTab>
            }
        </MatTabGroup>

        @code
        {

            List<TabItem> tabs = new List<TabItem>()
            {
                new TabItem()
                {
                    Label = "Tab 1",
                    Content = @<div>Content 1</div>
                },
                new TabItem()
                {
                    Label = "Tab 2",
                    Content = @<div>Content 2</div>
                },
                new TabItem()
                {
                    Label = "Tab 3",
                    Content = @<div>Content 3</div>
                },
                new TabItem()
                {
                    Label = "Tab 4",
                    Content = @<div>Content 4</div>
                },
                new TabItem()
                {
                    Label = "Tab 5",
                    Content = @<div>Content 5</div>
                },
            };

            void CloseTab(TabItem tab)
            {
                tabs.Remove(tab);
            }

            class TabItem
            {
                public string Label { get; set; }
                public RenderFragment Content { get; set; }
            }

        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <MatTabGroup>
            @foreach (var tab in tabs)
            {
                <MatTab>
                    <LabelContent>
                        @tab.Label <MatIconButton Icon=""@MatIconNames.Close"" OnClick=""@(_ => CloseTab(tab))""></MatIconButton>
                    </LabelContent>
                    <ChildContent>
                        @tab.Content
                    </ChildContent>
                </MatTab>
            }
        </MatTabGroup>

        @code
        {

            List<TabItem> tabs = new List<TabItem>()
            {
                new TabItem()
                {
                    Label = ""Tab 1"",
                    Content = @<div>Content 1</div>
                },
                new TabItem()
                {
                    Label = ""Tab 2"",
                    Content = @<div>Content 2</div>
                },
                new TabItem()
                {
                    Label = ""Tab 3"",
                    Content = @<div>Content 3</div>
                },
                new TabItem()
                {
                    Label = ""Tab 4"",
                    Content = @<div>Content 4</div>
                },
                new TabItem()
                {
                    Label = ""Tab 5"",
                    Content = @<div>Content 5</div>
                },
            };

            void CloseTab(TabItem tab)
            {
                tabs.Remove(tab);
            }

            class TabItem
            {
                public string Label { get; set; }
                public RenderFragment Content { get; set; }
            }

        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>

<h5 class="mat-h5">Dynamically set tab index</h5>

<DemoContainer>
    <Content>
        <MatButton OnClick="@ChangeTab">Change Tab</MatButton>
        <div>
            Active tab index: @tabIndex 
        </div>
        <MatTabGroup @bind-ActiveIndex="@tabIndex">
            <MatTab Label="First">
                First Content
            </MatTab>
            <MatTab Label="Second">
                Second Content
            </MatTab>
           <MatTab Label="Third">
                Third Content
            </MatTab>
            <MatTab Label="Fourth">
                Fourth Content
            </MatTab>

        </MatTabGroup>

        @code
        {
            public int tabIndex = 0;

            void ChangeTab(MouseEventArgs e)
            {
                tabIndex = tabIndex < 3 ? tabIndex + 1 : 0;
            }
        }
    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <MatButton OnClick=""@ChangeTab"">Change Tab</MatButton>
        <div>
            Active tab index: @tabIndex 
        </div>
        <MatTabGroup @bind-ActiveIndex=""@tabIndex"">
            <MatTab Label=""First"">
                First Content
            </MatTab>
            <MatTab Label=""Second"">
                Second Content
            </MatTab>
           <MatTab Label=""Third"">
                Third Content
            </MatTab>
            <MatTab Label=""Fourth"">
                Fourth Content
            </MatTab>

        </MatTabGroup>

        @code
        {
            public int tabIndex = 0;

            void ChangeTab(MouseEventArgs e)
            {
                tabIndex = tabIndex < 3 ? tabIndex + 1 : 0;
            }
        }
    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>

<DocMatTabBar></DocMatTabBar>
<DocMatTabLabel Secondary="true"></DocMatTabLabel>


<h5 class="mat-h5">Example</h5>

<DemoContainer>
    <Content>
        <MatTabBar>
            <MatTabLabel>Test1</MatTabLabel>
            <MatTabLabel>Test2</MatTabLabel>
            <MatTabLabel>Test3</MatTabLabel>
            <MatTabLabel>Test4</MatTabLabel>
            <MatTabLabel>Test5</MatTabLabel>
            <MatTabLabel>Test6</MatTabLabel>
        </MatTabBar>
    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <MatTabBar>
            <MatTabLabel>Test1</MatTabLabel>
            <MatTabLabel>Test2</MatTabLabel>
            <MatTabLabel>Test3</MatTabLabel>
            <MatTabLabel>Test4</MatTabLabel>
            <MatTabLabel>Test5</MatTabLabel>
            <MatTabLabel>Test6</MatTabLabel>
        </MatTabBar>
    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>